<template>
  <div>
<!-- 顶部 -->
      <div>
        <div class="box1">
            <div class="topbox"></div>
        </div>
        <div class="text1111">
           <p>待处理签约</p>
       </div>
      </div>
<!-- 表单 -->
      <div class="box2">
          <el-form ref="form"  label-width="70px" >
            <table border="0px" width="100%" height="150px" class="tab222">
                <tr>
                    <td width="55px">
                      <font>签约状态</font>
                      </td>
                    <td width="230px">
                            <el-select v-model="value" placeholder="请选择">
                             <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                         </el-select>
                    </td>
                    <td width="55px">
                      <font>签约机构</font></td>
                    <td   width="230px">
                            <el-select v-model="value1" placeholder="请选择">
                             <el-option
                                v-for="item in options1"
                                :key="item.value1"
                                :label="item.label1"
                                :value="item.value1">
                            </el-option>
                         </el-select>
                    </td>
                    <td width="55px"><font>医生团队</font></td>
                    <td  width="230px">
                            <el-select v-model="value2" placeholder="请选择">
                             <el-option
                                v-for="item in options2"
                                :key="item.value2"
                                :label="item.label2"
                                :value="item.value2">
                            </el-option>
                         </el-select>
                    </td>
                    <td align="right">
                      <template>
                          <download-excel
                          class="export-excel-wrapper"
                          :data="sea"
                          :fields="json_fields"
                          :header="title"
                          name="待处理签约.xls"
                        >
                          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                          <el-button type="primary" @click="daochu">导出</el-button>
                          </download-excel>
                      </template>
                    </td>
                </tr>
                <tr>
                  <td align="right"><font>服务包</font></td>
                    <td  >
                            <el-select v-model="value3" placeholder="请选择">
                             <el-option
                                v-for="item in options3"
                                :key="item.value3"
                                :label="item.label3"
                                :value="item.value3">
                            </el-option>
                         </el-select>
                    </td>
                    <td><font>选择日期</font></td>
                    <td colspan="2">
                        <el-date-picker
                            v-model="value5"
                            type="daterange"
                             format="yyyy/MM/dd HH:mm:ss"
                             value-format="yyyy/MM/dd HH:mm:ss"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </td>
                    <td colspan="3">
                        <div id="search_">
                          <el-input v-model="input2"  placeholder="请输入关键字"></el-input>
                          <i class="el-icon-search biaobiao1" @click="onSubmit"></i>
                        </div>
                    </td>

                      
 
                </tr>
            </table>
        </el-form>
      </div>     


  </div>
</template>


<script>
import axios from 'axios'
axios.defaults.baseURL="http://localhost:8080"
  export default {
    props: {
      sea: {
        type: Array,
      },
    },
    data() {
      return {
        //导出
        title: "待处理签约",
        json_fields: {
                "编号":'user_id',
                "签约人姓名":'user_name',
                "身份证号":'user_cardId',
                "手机号码":'user_phone',
                "签约医生团队":'teamName',
                "签约服务包":'serveName',
                "最后修改时间":'end_time',
              },
        // DetailsForm: [],
        options: [{
          value: '1',
          label: '待审核'
        }, {
          value: '2',
          label: '待支付'
        }, {
          value: '3',
          label: '已驳回'
        }],
        value:"",//签约状态


        options1: [{
          value1: '1',
          label1: '罗西社区服务中心'
        }, {
          value1: '2',
          label1: '天明社区服务中心'
        }, {
          value1: '3',
          label1: '民进社区服务中心'
        }],
        value1:"",//签约机构


        options2: [{
          value2: '1',
          label2: 'A团队'
        }, {
          value2: '2',
          label2: 'B团队'
        }, {
          value2: '3',
          label2: 'C团队'
        }],
        value2:"",//医生团队

        options3: [{
          value3: '1',
          label3: '基础包'
        }, {
          value3: '2',
          label3: '老人服务包'
        }, {
          value3: '3',
          label3: '慢性病护理包'
        }],
        value3:"",//服务包



        value5:"",//日期
        input2: '',//搜索


        list:"",//存放签约状态下拉
        list1:"",//签约机构
        list2:"",//医生团队
        list3:"",//服务包
      }
    },
    created () {
        // this.query()
        // this.query1()
        // this.query2()
        // this.query3()
        this.DetailsForm = this.sea
        console.log(this.DetailsForm);
    }
    ,
  methods: {
      //条查
    onSubmit(){ 
        this.$emit("subFn",this.value,this.value1,this.value2,this.value3,this.value5,this.input2)
    },
    //签约状态
    // query(){
    //     axios({
    //         url:'/sign/getSignList',
    //         method:'GET',
    //     }).then((res) => {
    //         this.list=res.data      //把值传到list里面
    //         //console.log(res.data);
    //     })
    // },
    //签约机构
    // query1(){
    //     axios({
    //         url:'/sign/getSignList',
    //         method:'GET',
    //     }).then((res) => {
    //         this.list1=res.data      //把值传到list里面
    //         //console.log(res.data);
    //     })
    // },
    //医生团队
    // query2(){
    //     axios({
    //         url:'/sign/getSignList',
    //         method:'GET',
    //     }).then((res) => {
    //         this.list2=res.data      //把值传到list里面
    //        // console.log(res.data);
    //     })
    // },
    // //服务包
    // query3(){
    //     axios({
    //         url:'/sign/getSignList',
    //         method:'GET',
    //     }).then((res) => {
    //         this.list3=res.data      //把值传到list里面
    //         //console.log(res.data);
    //     })
    // },
  }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
}

.topbox{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.box1{
    position: absolute;
    left: 35px;
    top: 43px;
    float: left;
}
.td1{
  position: absolute;
  left: 960px;
}
.td2{
    position: absolute;
  left: 960px;
}
.text1111{
    position: absolute;
    left: 50px;
    top:43.5px;
    font-size: 18px;
    float: left;
}
.box2{
    position: absolute;
    top: 80px;
    left: 25px;
    font-size: 13px;
    width: 96%;
}
.box2 font{
  color:#B39999;
}
#search_{
  position: relative;
  top: 0;
}
#search_ .biaobiao1{
  position: absolute;
  right: 10px;  
  top: 15px
}
.tab222{
  float: left;
  margin-left: 1%;
}
.cc2{
  position: absolute;
  right: 10px;  
  top: 15px
}



</style>